<template>
  <div class="container">
    <!-- <div class="top">
      <a href="/pages/select_city_new/main">
        <img :src="newUrl+'h5_images/lifebeauty/3/gps.png'" alt class="gps" />
        {{province_name}}
      </a>
      <img :src="newUrl+'h5_images/lifebeauty/3/sao.png'" alt class="sao" />
      <img :src="newUrl+'h5_images/lifebeauty/3/ling.png'" alt class="msg" />
      <img :src="newUrl+'h5_images/lifebeauty/3/redling.png'" alt v-if="0" class="msg" />
    </div>-->
    <!-- search Bar -->
    <div class="searchBar">
      <div class="gps">
        <a href="/pages/package_mall/select_city_new/main">
          <img src="https://img.ameimeika.com/h5_images/lifebeauty/3/gps.png"
               alt
               class="img" />
          {{province_name}}
        </a>
      </div>
      <div class="content">
        <input type="text"
               placeholder="大家都在搜全脸填充"
               class="search-inp"
               @click="search_focus()"
               disabled />
        <img class="search-icon"
             :src="imgUrl+'h5_images/mp_images/mp_2.0/shouye/sousuokuangneisousuo@2x.png'" />
      </div>
      <div class="msg">
        <a href="/pages/package_main/message_list/main"
           class="msgbox">
          <img :src="imgUrl+'h5_images/mp_images/mp_3.0/indexpage/ic_information@3x.png'"
               alt
               class="img" />
          <div style="clear:both;"></div>
        </a>
        <div class="tip"
             v-if="has_msg"></div>
      </div>
    </div>
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scroll="scroll"
                 @scrolltolower="pullrefresh">
      <!-- 轮播图 -->
      <!-- banner -->
      <div class="banner">
        <swiper :indicator-dots="true"
                :autoplay="true"
                :circular="true"
                :interval="2000"
                :duration="500"
                indicator-color="rgba(255, 255,255,.5)"
                indicator-active-color="rgba(255, 255,255,1)">
          <block v-for="(item, index) in bannerImg"
                 :key="index">
            <swiper-item @click="to_detail(item)">
              <img v-if="imgUrl&&item.image"
                   :src="imgUrl+item.image"
                   class="slide-image" />
            </swiper-item>
          </block>
        </swiper>
        <!-- <div class="searchBox"
             @click="search_focus()"
             v-if="scrollTop < 50">
          <img :src="ImgBaseUrl+'mp_2.0/shouye/sousuo--bai@2x.png'"
               alt
               class="searchIcon">
        </div>-->
      </div>
      <!-- 分类列表 -->
      <div class="projectbox">
        <ul class="project_list">
          <li class="list_item"
              v-for="(item,index) in project_list"
              :key="index"
              @click="to_class_detail(item)">
            <img v-if="imgUrl&&item.image"
                 :src="imgUrl+item.image"
                 alt
                 class="list_img"
                 mode="widthFix" />
            <br />
            <span class="list_name">{{item.name}}</span>
          </li>
        </ul>
        <p class="isShow"
           @click="clickShow">
          <!-- <p class="isShow" @click="clickShow" > -->
          <!-- <span class="showBtn" v-text="btnText"></span> -->
          {{btnText}}
          <img :src="ImgBaseUrl + 'xia-hui@2x.png'"
               class="downimg" />
        </p>
      </div>

      <div class="activity clearfix"
           v-if="activityList !== null">
        <img :src="imgUrl+item.image"
             alt
             class="activity_img clearfix"
             @click="activityEvent(item,type)"
             v-for="(item ,index) in activityList"
             :key="index" />
      </div>
      <div class="character_Medical">
        <img :src="imgUrl+'h5_images/mp_images/3.15/pinzhi1.png'"
             alt
             class="character_Medical_img" />
      </div>
      <div class="project-list clearfix malllist">
        <div class="malltab"
             v-if="tab_arr.length>0">
          <mall-tab :tab_arr="tab_arr"
                    :bgcolor="isbgColor"
                    @toggle_tab="toggle_tab"></mall-tab>
        </div>
        <mallList :mallList="mallList"></mallList>
        <p class="bottomtext"
           v-if="isbottom">
          <span class="line"></span>因为甄选，所以珍稀
          <span class="line"></span>
        </p>
        <div class="bgbox"
             v-if="bgImg && mallList.length==0">
          <img src="https://img.ameimeika.com/h5_images/mp_images/3.1/empty.png"
               alt
               class="nothing" />
          <div class="text">即将上线，敬请期待</div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>
<script>
import mallList from "@/components/mall_List/mall_List";
import imageurl from "@/assets/js/image.js";
import common from "@/assets/js/mmk_common.js";
import malltab from "@/components/mall_tab/mall_tab";
export default {
  data () {
    return {
      searchVal: "",
      imgUrl: imageurl,
      bannerImg: [],
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      newUrl: common.image_response,
      project_list: [],
      allProject: "",
      showBtn: false,
      btnText: "展开全部",
      pageNum: 1,
      bannerImg: [],
      mallList: [],
      bgImg: false,
      str: "",
      isbottom: false,
      longitude: "",
      latitude: "",
      province: 13,
      alpha: 0,
      activityList: "", //广告位列表
      scrollTop: 0,
      tab_arr: [],
      tab_id: 0,
      tab_value: "推荐",
      menuTop: 1200,
      menuFixed: false,
      all_ok: false,
      province_name: "",
      has_msg: false,
      isbgColor: ""
    };
  },
  onLoad: function (options) {
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#3EB0A9", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    wx.setNavigationBarTitle({
      title: "品质医美"
    });
    // this.isbgColor = '#F3F4F6'
    this.getSwiper(); //轮播图
    this.getListData(); //整形分类列表
    let addressObj;
    if (wx.getStorageSync("province_info")) {
      addressObj = JSON.parse(wx.getStorageSync("province_info")).province_id;
    }
    let that = this;
    wx.getStorage({
      key: "province_info",
      success: res => {
        let info = JSON.parse(res.data);
        console.log(info);
        that.province_name = info.province_name;
        that.province_id = info.province_id;
        that.get_location();
      },
      fail: () => {
        that.get_location();
      }
    });
    if (addressObj) {
      this.province = addressObj;
      this.get_location();
    } else {
      this.get_tab();
    }
    this.getActivityData();
    wx.getStorage({
      key: "user_token",
      success: res => {
        that.get_msg();
      }
    });
  },
  onShow () {
    let that = this;
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#3EB0A9", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    wx.setNavigationBarTitle({
      title: "品质医美"
    });
    this.getSwiper();
    let addressObj;
    if (wx.getStorageSync("province_info")) {
      addressObj = JSON.parse(wx.getStorageSync("province_info")).province_id;
      // console.log(addressObj)
      this.province_name = JSON.parse(
        wx.getStorageSync("province_info")
      ).province_name;
      this.getData();
    }
    wx.getStorage({
      key: "user_token",
      success: res => {
        that.get_msg();
      }
    });
  },
  components: {
    mallList,
    mallTab: malltab
  },

  methods: {
    search_focus () {
      wx.navigateTo({ url: "/pages/package_main/search_index/main?status=2" });
    },
    searchEvent () {
      wx.navigateTo({ url: "/pages/package_main/searchPage/main?type=1" });
    },
    to_detail (item) {
      //轮播图跳详情页
      common.to_detail(item);
    },
    getSwiper () {
      // 轮播图接口
      common.fly_post(
        "api/v4_5/home/banners",
        {
          cate_id: 2,
          province_id: this.province
        },
        msg => {
          let res = msg.data;
          if (res.status_code == 0) {
            this.bannerImg = res.data;
          } else {
            common.mmk_Loading(2, res.message);
            return false;
          }
        }
      );
    },
    getListData () {
      // 分类列表
      common.fly_post(
        "api/v4_5/beauty_categories/list",
        {
          page: 1,
          pageSize: 10,
          type: 0
        },
        msg => {
          let res = msg.data;
          if (res.status_code == 0) {
            this.allProject = res.data;
            this.project_list = res.data.slice(0, 15);
          } else {
            common.mmk_Loading(2, res.message);
            return false;
          }
        }
      );
    },
    // 列表展开收起
    clickShow (e) {
      this.showBtn = !this.showBtn;
      if (this.showBtn == true) {
        this.project_list = this.allProject;
        this.btnText = "收起全部";
      } else {
        this.project_list = this.allProject.slice(0, 15);
        this.btnText = "展开全部";
      }
    },
    // 广告位列表
    getActivityData () {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/home/banners",
        {
          cate_id: 6,
          province_id: this.province
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            this.activityList = res.data;
          } else {
            common.mmk_Loading(2, res.message);
            return false;
          }
        }
      );
    },
    //商品列表
    // getData (e) {
    //   if (this.isbottom) {
    //     return false;
    //   }
    //   let obj = {
    //     keyword: this.tab_value,
    //     lat: this.latitude.toString(),
    //     lng: this.longitude.toString(),
    //     pageNum: this.pageNum,
    //     pageSize: 10,
    //     isDashboard: 1,
    //     provinceId: this.province,
    //     userId: wx.getStorageSync("user_id") || 0
    //   };
    //   common.fly_post("/api/com.mmk.reservation.api.OpenProjectProvider/1.0.0/projectList.html", obj,
    //   msg => {
    //     let res = msg.data;
    //     if (res.code == 0) {
    //       if (res.data.projectData.length == 0 && this.pageNum > 1) {
    //         // common.mmk_Loading(2, "已经到最底下了")
    //         this.isbottom = true;
    //         // return false;
    //       } else if (this.pageNum == 1) {
    //         this.mallList = res.data.projectData;
    //         console.log(res.data)
    //         if (res.data.projectData.length == 0) {
    //           // console.log(res.data.projectData.length +'----357')
    //           console.log(this.pageNum)
    //           this.bgImg = true;
    //         }
    //       } else if (res.data.projectData.length > 0 && this.pageNum > 1) {
    //         this.mallList.push(...res.data.projectData);
    //       }
    //     } else {
    //       common.mmk_Loading(2, res.message);
    //       return false;
    //     }
    //   },'isJava');
    // },
    getData (e) {
      if (this.isbottom) {
        return false;
      }
      let obj = {
        keyword: this.tab_value,
        lat: this.latitude,
        lng: this.longitude,
        page: this.pageNum,
        pageSize: 10,
        is_dashboard: 1,
        province_id: this.province,
        user_id: wx.getStorageSync("user_id") || 0
      };
      common.fly_post("api/v4_5/shop_project/index", obj, msg => {
        let res = msg.data;
        if (res.status_code == 0) {
          if (res.data.data.length == 0 && this.pageNum > 1) {
            // common.mmk_Loading(2, "已经到最底下了")
            this.isbottom = true;
            // return false;
          } else if (this.pageNum == 1) {
            this.mallList = res.data.data;
            console.log(res.data);
            if (res.data.data.length == 0) {
              // console.log(res.data.projectData.length +'----357')
              console.log(this.pageNum);
              this.bgImg = true;
            }
          } else if (res.data.data.length > 0 && this.pageNum > 1) {
            this.mallList.push(...res.data.data);
          }
        } else {
          common.mmk_Loading(2, res.message);
          return false;
        }
      });
    },
    toCategorize_list (id, name) {
      wx.navigateTo({
        url: `/pages/package_projects/categorize_list/main?url=${id}&project_name=${name}&type=2`
      });
    },
    pullrefresh (e) {
      if (this.mallList.length == 0 && this.pageNum == 1 || this.isbottom) {
        return
      } else {
        this.pageNum++;
        this.getData();

      }
    },
    get_location () {
      let that = this;
      wx.authorize({
        scope: "scope.userLocation",
        success () {
          wx.getLocation({
            type: "gcj02",
            success (res) {
              that.longitude = res.longitude; // 经度，浮点数，范围为-180~180，负数表示西经
              that.latitude = res.latitude; // 纬度，浮点数，范围为-90~90，负数表示南纬
              that.get_tab();
            },
            fail () {
              common.mmk_Loading(2, "无法获取地理位置");
              that.province_name = "湖北";
              that.province = 13;
              that.get_tab();
              wx.navigateBack({
                delta: -10
              });
            }
          });
        },
        fail () {
          that.province_name = "湖北";
          that.province = 13;
          that.get_tab();
        }
      });
    },
    scroll (e) {
      // this.scrollTop = e.mp.detail.scrollTop;
      // this.alpha = this.scrollTop / 200 > 1 ? 1 : this.scrollTop / 200;
    },
    activityEvent (item) {
      //广告位跳详情
      common.to_detail(item);
    },
    get_tab () {
      common.fly_post(
        "api/v4_5/project/tab_check",
        {
          tabNum: 2
        },
        result => {
          let res = result.data;
          if (res.status_code == "0") {
            this.tab_arr = res.data;
            if (this.tab_arr.length > 0) {
              this.pageNum = 1;
              this.isbottom = false;
              this.tab_arr[0].active = true;
              this.tab_id = this.tab_arr[0].id;
              this.tab_value = this.tab_arr[0].value;
              this.getData();
            }
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    toggle_tab (item) {
      this.tab_id = item.id;
      this.tab_value = item.value;
      this.isbottom = false;
      this.pageNum = 1;
      this.bgImg = false;
      this.getData();
    },
    to_class_detail (item) {
      switch (item.project_cate_type) {
        case 0:
          // 全部分类
          wx.navigateTo({
            url: "/pages/package_projects/total_classification/main"
          });
          break;
        case 1:
          // 一级分类
          wx.navigateTo({
            url: `/pages/package_projects/two_level/main?obj=${JSON.stringify(
              item
            )}`
          });
          break;
        case 2:
          // 二级分类
          wx.navigateTo({
            url: `/pages/package_projects/two_level/main?obj=${JSON.stringify(
              item
            )}`
          });
          break;
        case 3:
          // 三级分类
          wx.navigateTo({
            url: `/pages/package_projects/three_level/main?cate_name=${
              item.name
              }&cate_id=${item.id}`
          });
          break;

        default:
          break;
      }
    },
    // 获取消息列表
    get_msg () {
      let that = this;
      common.fly_post(
        "api/v4_5/user_messages/system_index",
        {
          page: 1,
          pageSize: 1000
        },
        result => {
          let res = result.data;
          if (res.status_code == 0) {
            var now_num = res.data.total;
            var old_num = wx.getStorageSync("msg_num")
              ? wx.getStorageSync("msg_num")
              : 0;
            console.log(now_num + "----now_num");
            console.log(old_num + "----old_num");
            if (now_num - old_num > 0) {
              this.has_msg = true;
            } else {
              this.has_msg = false;
            }
          }
        }
      );
    }
  }
};
</script>
<style scoped lang="less">
.container {
  height: 100%;
  /* overflow: hidden; */
  padding-bottom: 48px;
  position: relative;
}

.tip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 94, 122, 1) 0%,
    rgba(255, 0, 45, 1) 100%
  );
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
  border: 1px solid #fff;
  position: absolute;
  top: 25%;
  right: 16%;
}

// banner
.banner {
  height: 137px;
  margin: 58px 10px 0;
  position: relative;
  swiper {
    height: 100%;
  }
  .slide-image {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }
  .searchBox {
    position: absolute;
    width: 22px;
    height: 22px;
    right: 0;
    top: 1;
    margin: 15px 15px 0 0;
    .searchIcon {
      width: 22px;
      height: 22px;
      display: block;
    }
  }
}
// search Bar
.searchBar {
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background: #3EB0A9;

  // box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.06);
  display: flex;
  .gps {
    width: 23%;
    height: 100%;
    line-height: 44px;
    display: inline-block;
    font-size: 14px;
    color: #fff;
    padding-left: 12px;
    font-weight: 700;
    font-family: "Regular";
    margin-right: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    .img {
      width: 22px;
      height: 22px;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .msg {
    position: relative;
    margin: 0 10px;
    width: 40px;
    .img {
      width: 26px;
      height: 26px;
      // margin-top: 5px;
      position: absolute;
      top: 26%;
      left: 20%;
    }
  }
  .content {
    width: 56%;
    height: 32px;
    position: relative;
    // margin: 8px 0 9px 0;
    margin-top: 6px;
    .search-inp {
      width: 100%;
      height: 32px;
      background: #fff;
      border-radius: 16px;
      display: block;
      margin: 0 auto;
      box-sizing: border-box;
      padding-left: 35px;
      // opacity: 0.7961;
    }
    .search-icon {
      width: 20px;
      height: 20px;
      display: block;
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      // opacity: 0.31;
    }
  }
}

/* 项目列表展示 */
.projectbox {
  width: 100%;
  margin-bottom: 10px;
}
.project_list {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  // padding: 15px 0 0;
  padding: 7px 0 0;
  overflow: hidden;
  background-color: #fff;
}
.project_list_show {
  overflow: visible;
  /* margin-bottom: 80px; */
}
.project_list_hidden {
  height: 245px;
}
.list_item {
  height: 63px;
  width: 20%;
  margin-bottom: 10px;
  text-align: center;
  float: left;
  position: relative;
  .list_img {
    width: 26px;
    height: auto;
    position: absolute;
    // top: 50%;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.padding_bottom {
  padding-bottom: 20px !important;
}

.list_name {
  width: 80%;
  height: 16px;
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin: 0 auto;
  position: absolute;
  bottom: -8%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 展开全部样式 */
.isShow {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background-color: #fff;
  position: relative;
  margin-bottom: 10px;
  margin-top: 4px;
  font-size: 12px;
  color: #666;
  .downimg {
    width: 10px;
    height: 7px;
    line-height: 32px;
    vertical-align: baseline;
  }
}
.ulHeight {
  height: auto !important;
}
.showBtn {
  font-size: 12px;
  line-height: 37px;
  color: #666;
}
.showIMG {
  width: 22px;
  height: 12px;
  margin-top: 4px;
}
.dv {
  height: 20px;
}
/* 筛选 */
.nav {
  width: 100%;
  height: 48px;
  margin-bottom: 10px;
  background-color: #fff;
}
.nav_item {
  width: 31.3%;
  text-align: center;
  line-height: 48px;
  font-size: 14px;
  color: #666;
  float: left;
  position: relative;
}
.nav_up {
  width: 7px;
  height: 4px;
  position: absolute;
  top: 35%;
  left: 70%;
}
.nav_down {
  width: 7px;
  height: 4px;
  position: absolute;
  bottom: 37%;
  left: 70%;
}
/* 全部项目样式 */
.allPeoject {
  font-size: 17px;
  color: #444;
  line-height: 44px;
  padding-left: 15px;
  margin-top: 10px;
  background-color: #fff;
}

.activity {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
  background-color: #fff;
}
.activity_img {
  width: 173px;
  height: 68px;
  margin-right: 9px;
  margin-top: 10px;
  float: left;
  border-radius: 5px;
}

.activity_img:nth-of-type(2),
.activity_img:nth-of-type(4) {
  margin-right: 0;
}

// 品质医美
// .character_Medical {
//   width: 100%;
//   height: 19px;
//   text-align: center;
//   margin:20px 0 0;
// }
// .character_Medical_img {
//   width: 115px;
//   height: 18px;
//   // margin: 13px auto;
// }

.character_Medical {
  width: 100%;
  height: 22px;
  text-align: center;
  margin: 20px 0 0;
}
.character_Medical_img {
  width: 107px;
  height: 22px;
  // margin: 13px auto;
}

.project-list {
  position: relative;
  padding-bottom: 46px;
  .malltab {
    width: 100%;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: sticky;
    top: 43px;
    z-index: 90;
    background-color: #fff;
  }

  .bottomtext {
    width: 100%;
    height: 60px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(153, 153, 144, 1);
    text-align: center;
    line-height: 60px;
    .line {
      width: 18px;
      height: 1px;
      background-color: #dbdbdb;
      display: inline-block;
      vertical-align: middle;
      &:first-of-type {
        margin-right: 10px;
      }
      &:last-of-type {
        margin-left: 10px;
      }
    }
  }
  .bgbox {
    width: 100%;
    height: 100%;
    padding: 90px 0;
    box-sizing: border-box;
    .nothing {
      width: 128px;
      height: 114px;
      margin: 0 auto;
      display: block;
    }
    .text {
      width: 100%;
      font-size: 14px;
      font-weight: 400;
      margin-top: 13px;
      color: rgba(153, 153, 153, 1);
      text-align: center;
    }
  }
}
.malllist {
  background-color: rgba(243, 244, 246, 1);
}
</style>


